window.addEventListener("load", function () {
  // 因为js是外部文件，所以要等文档全部加载完毕再触发
  // 获取元素
  var mask = document.querySelector(".mask"); //  黄色遮挡层
  var big = document.querySelector(".big"); //  大图片盒子
  var preview_img = document.querySelector(".preview_img"); // 小图片盒子
  //  注册事件  当鼠标经过小图片盒子，黄色的遮挡层和大图片盒子显示，离开隐藏两个盒子功能
  preview_img.addEventListener("mouseover", function () {
    //  鼠标经过小图片
    mask.style.display = "block";
    big.style.display = "block";
  });
  preview_img.addEventListener("mouseout", function () {
    //  鼠标离开小图片
    mask.style.display = "none";
    big.style.display = "none";
  });
// 鼠标移动的时候，让黄色的盒子跟着鼠标来走
  preview_img.addEventListener("mousemove", function (e) {
    // 1.  先计算出鼠标在盒子内的坐标
    var x = e.pageX - this.offsetLeft
    var y = e.pageY - this.offsetTop
    // 2.  减去盒子高度的一半（300）是 150  就是我们mask的最终left 和 top值
    // 3.  我们mask 移动的距离
    var maskX = x - mask.offsetWidth / 2 
    var maskY = y - mask.offsetHeight / 2 
    // 4. 如果x 坐标小于0 就让他停在0 的位置上 
    // 遮挡层的最大移动距离
    var maskMax = preview_img.offsetWidth - mask.offsetWidth
    if(maskX <= 0) {
        maskX = 0
    } else if (maskX >= maskMax) {
        maskX = maskMax
    }
    if (maskY <= 0) {
        maskY = 0
    } else if (maskY >= maskMax) {
        maskY = maskMax
    }
    mask.style.left = maskX + 'px'
    mask.style.top = maskY + 'px'
    // 大图片的移动距离 = 遮挡层移动距离 * 大图片最大移动距离 / 遮挡层的最大移动距离
    // 大图
    var bigIMg = document.querySelector('.bigImg')
    // 大图片最大移动距离
    var bigMax = bigIMg.offsetWidth - big.offsetWidth
    // 大图片的移动距离 X Y
    var bigX = maskX * bigMax / maskMax
    var bigY = maskY * bigMax / maskMax
    bigIMg.style.left = -bigX + 'px'
    bigIMg.style.top = -bigY + 'px'
  });
});
